<template>
    <!-- 菜单管理-->
    <div>
        <div class="button">
            <el-button type="primary" :icon="Plus" @click="addemployee">添加</el-button>
        </div>
        <div class="table">
            <el-table
                ref="multipleTable"
                v-loading="state.loading"
                height="100%"
                :data="state.tableData"
                style="width: 100%"
                row-key="id"
                border
            >
                <template v-for="item in state.data" :key="item.porp">
                    <el-table-column
                        align="center"
                        :prop="item.porp"
                        :label="item.label"
                        :min-width="item.width"
                    ></el-table-column>
                </template>

                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="tableClick(scope.$index, scope.row)">
                            修改
                        </el-button>
                        <el-button type="text" size="small" @click="tableClick(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import API from '@/api';

const state = reactive({
    tableData: [],
    loading: false,
    data: [
        { label: '菜单名称', porp: 'title' },
        { label: 'url', porp: 'url' },
        { label: '路径', porp: 'path' },
        { label: '排序', porp: 'sortNumber' },
        { label: '创建时间', porp: 'createTime' }
    ]
});
const getMenu = async () => {
    try {
        state.loading = false;
        const resp = await API.menu_tree({ method: 'GET' });
        state.tableData = resp;
    } catch (err) {
        state.loading = false;
    }
};
onMounted(() => {
    state.loading = true;
    getMenu();
});
</script>
<style lang="scss" scoped>
.button {
    margin: 15px;
}
.table {
    height: 80%;
}
</style>
